<template>
	<view class="class-detail d-flex flex-column">
		<!-- <QSNavbar :navbarItems="navbarItems_1" backgroundColor="#4BA677"></QSNavbar> -->
		<view class="top flex-between">
			<u-gap height="20rpx" bgColor="#EDF5F5"></u-gap>
			<view class="d-flex justify-space-between align-start flex-column" style="width: 60%;">
				<!-- <u-tag :text="`${goods_spec}`" bgColor="#fff" color="#ffa400" borderColor="rgba(0,0,0,0)" shape="circle"></u-tag> -->
				<view class="text flex-align" style="margin-top: 30rpx;width: 100%;overflow: hidden;">
					<view class="it flex-align" style="max-width: 50%;">
						<!-- <u-icon name="clock" color="#fff"></u-icon> -->
						<!-- <view class="" style="font-size: 34rpx;color: #4BA677;">
							{{infoname}}
						</view> -->
						<view class=""
							style="font-size: 34rpx;color: #4BA677;max-width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							{{student_name}}
						</view>
					</view>
					<view class="it flex-align" style="max-width: 60%;">
						<!-- <u-icon name="clock" color="#fff"></u-icon> -->
						<!-- <view class="" style="font-size: 34rpx;color: #4BA677;">
							{{infoname}}
						</view> -->
						<view class=""
							style="font-size: 34rpx;color: #4BA677;max-width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							{{infoname}}
						</view>
					</view>
				</view>
				<!-- train_enum_id == 1  短训培训班-->
				<!-- train_enum_id == 2 长训-->
				<!-- train_enum_id == 3 小班 约课-->
				<view class="text flex-align" style="margin-top: 20rpx">
					<view class="it flex-align">
						<!-- <u-icon name="clock" color="#fff"></u-icon> -->
						<view class="" style="font-size: 26rpx;">
							{{area_name}}
							<text class="tr_ut" v-if="train_enum_id ==1">短训</text>
							<text class="tr_ut" v-if="train_enum_id ==2">长训</text>
							<text class="tr_ut" v-if="train_enum_id ==3">小班</text>
						</view>
					</view>
				</view>
			</view>

			<view class="" style="margin-right: 30rpx;">
				<cCircle :size="62" :percent="percent" animation circleColor="#4BA677" :circleWidth="5" :direction="180"
					defaultColor="#C9ECDA">
					<view slot="content" class="flex-center"
						style=" height: 100%;width: 100%;border-radius: 50%;background-color: #fff;color: #4BA677;">
						{{num?num:0}}/{{hour_num?hour_num:0}}课
					</view>
				</cCircle>
			</view>
		</view>

		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
								  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30" :current="currentTab"
				@click="onClickTab" />
		</u-sticky>

		<scroll-view style="width: 100%;height: 80vh;" scroll-y>
			<!-- 课时 -->
			<schedule v-show="currentTab === 0" :list="list" :train_enum_id='train_enum_id'
				:class_mode_id='class_mode_id' :train_item_id='train_item_id' :goods_id='goods_id'
				:student_id='student_id' :class_id='class_id' />

			<!-- 服务 -->
			<service v-show="currentTab === 1" :mobile='mobile' />

			<!-- 记录 -->
			<!-- <record v-show="currentTab === 2" class="d-flex flex-grow-1" :recordlist='recordlist'/> -->
			<record v-show="currentTab === 2" :recordlist="recordlist" :train_enum_id='train_enum_id'
				:class_mode_id='class_mode_id' :train_item_id='train_item_id' :goods_id='goods_id'
				:student_id='student_id' :class_id='class_id' />
		</scroll-view>
	</view>
</template>

<script>
	import schedule from "./schedule";
	import service from "./service";
	import record from "./record";
	const index = require("@/api/personal/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			schedule,
			service,
			record,
			QSNavbar,
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "课时详情",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				num: '',
				hour_num: '',
				percent: '',
				currentTab: 0,
				tabsList: [{
					name: "课时"
				}, {
					name: "服务"
				}, {
					name: "记录"
				}],
				list: [],
				id: '',
				student_id: '',
				goods_spec: '',
				train_enum_id: '',
				class_mode_id: "",
				train_item_id: '',
				class_id: '',
				student_name: '',
				area_name: '',
				goods_id: "",
				listQuery: { //分页
					pageSize: 10,
					page: 1,
				},
				mobile: '',
				recordlist: [],
				totalPage: '',
				infoname: ""
			};
		},
		// onLoad({
		// 	title,
		// 	id
		// }) {
		// 	uni.setNavigationBarTitle({
		// 		title,
		// 	});

		// 	this.class_times()
		// 	this.ysl()
		// },
		onLoad(options) {
			this.student_id = options.student_id
			this.id = options.id
		},
		onShow() {
			this.class_times()
			this.records()
		},
		methods: {
			// 课包-服务-手机号
			async mob() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id: this.id,
				}
				let res = await index.mob(postData)
				if (res.code === 1) {
					this.mobile = res.data.mobile
				}
			},
			// // 课包-记录
			async records() {
				let that = this;
				if (this.listQuery.page === 1) that.recordlist = [];
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
					page: this.listQuery.page,
					pageSize: this.listQuery.pageSize,
					id: this.id
				}
				let res = await index.records(postData)
				if (res.code === 1) {
					// this.recordlist = res.data.list.data
					that.recordlist = that.recordlist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.page) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.records()
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},

			onClickTab({
				index
			}) {
				this.currentTab = index;
				if (this.currentTab == 0) {
					this.class_times()
				} else if (this.currentTab == 1) {
					this.mob()
				} else if (this.currentTab == 2) {
					// this.records()
					this.class_times()
				}
			},
			// 获取课节
			async class_times() {
				let postData = {
					id: this.id,
					student_id: this.student_id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					openid: uni.getStorageSync('openid')
				}
				let res = await index.class_times(postData)
				if (res.code === 1) {
					let num = parseFloat(res.data.info.num)
					let hour_num = parseFloat(res.data.info.hour_num)
					this.num = num
					this.hour_num = hour_num
					this.percent = this.amount((num / hour_num * 100))
					this.goods_spec = res.data.info.name
					this.train_enum_id = res.data.info.train_enum_id
					this.class_mode_id = res.data.info.class_mode_id
					this.train_item_id = res.data.info.train_item_id
					this.class_id = res.data.info.class_id
					this.goods_id = res.data.info.id
					this.area_name = res.data.info.area_name
					this.list = res.data.info.timesList
					this.student_name = res.data.info.student_name
					this.infoname = res.data.info.name
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.class-detail {
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #EDF5F5;

		.top {
			color: #000000;
			width: 710rpx;
			height: 180rpx;
			background: linear-gradient(180deg, rgba(194, 242, 217, 0.5) 0%, rgba(206, 255, 230, 0) 100%), #FFFFFF;
			border-radius: 10rpx;
			border: 1rpx solid;
			border-image: linear-gradient(180deg, rgba(75, 166, 119, 1), rgba(75, 166, 119, 0.4)) 1 1;
			margin-left: 20rpx;

			.text {
				font-size: 30rpx;

				.it {
					&+.it {
						margin-left: 30rpx;
					}

					.tr_ut {
						color: #4BA677;
						border: 1rpx solid #4BA677;
						font-size: 24rpx;
						padding: 0rpx 10rpx 0rpx 10rpx;
						margin-left: 10rpx;
						border-radius: 6rpx;
					}
				}
			}
		}

		/deep/.u-tabs {
			// background-color: #fff;
			// border-bottom: 1px solid #e5e5e5;
			border-radius: 30rpx 30rpx 0 0;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}
	}
</style>